← Tổng quan

Fourier UI — Style Guide

Trang tham chiếu cho mọi mockup: token màu, type scale, 12 component lõi, mastery pill, data-state badge. Nguồn: §A5 — Design system "Fourier UI".

✦ Quy tắc vàng: màu tím chỉ dùng cho nội dung AI sinh — không ngoại lệ

1 · Design tokens — Màu

Light mode (mặc định). Dark mode giữ hue, nâng lightness.

bg
#F7F8FB
surface
#FFFFFF
surface-2
#F1F3F9
border
#E4E7EF
text
#171C2E
text-2 / text-3
#5A6377 · #8A92A6
primary — Fourier Blue
#2E5BFF · hover · soft
✦ ai — AI Violet
#7C3AED · #F3EEFE
success
#12A150
info — teal
#0E7490
warning
#B45309 · #FEF3C7
danger
#DC2626 · #FEECEC
spectrum — brand gradient (competency, report header, milestone)
#2E5BFF → #0EA5A4 → #12A150
Dark mode
giữ hue, +8% lightness
surface #171B2C
surface-2 · text-2
primary +8%
✦ ai +8%
Cockpit chấm bài được ưu tiên dark trước (GV chấm 21–24h)

2 · Màu ngữ nghĩa cho trạng thái học tập

Dùng thống nhất toàn app — không truyền nghĩa chỉ bằng màu, luôn kèm icon/text.

○ Chưa bắt đầumastery pill, ô attendance trống
↗ Đang tiến bộmastery đang lên, bài đang làm
⚠ Cần chú ýgap detection, deadline <24h
⚠ Rủi ro / quá hạnat-risk, bài quá hạn, nợ phí
✓ Đạt / hoàn thànhmastered, đã nộp, đã đóng đủ
✓ Mastered · lâu chưa ônkỹ năng decay — gợi ý bài làm mới evidence
✦ AI đề xuất · chờ duyệtdraft feedback, gợi ý remedial, auto-tag — CHỈ cho nội dung AI sinh

3 · Typography — Be Vietnam Pro

Thiết kế cho dấu tiếng Việt: line-height ≥1.5 body, ≥1.3 heading, không letter-spacing âm. Test: ậ ổ ữ đ ơ ế

34 / 800Học viên Nguyễn Thảo My đạt band 6.5
28 / 700Học viên Nguyễn Thảo My đạt band 6.5
22 / 700Học viên Nguyễn Thảo My đạt band 6.5
18 / 600Học viên Nguyễn Thảo My đạt band 6.5
16 / 400 · HS-PHTuần này Minh nộp đủ 2 bài và có tiến bộ rõ ở phần mở bài.
14 / 400 · GV denseChấm 8 bài Writing Task 2 — IELTS 6.5 tối · hạn chấm còn 32 giờ
13 / 400 · phụNộp lúc 21:14 · Thứ Ba 08/07 · tự động lưu nháp
12 / 500 · captionBAND 5.5 · +0.5 SO VỚI THÁNG TRƯỚC
tabular-nums1.500.000 ₫ · 320/500 lượt · 18/07/2026bắt buộc cho bảng điểm, tiền, quota

4 · Nút

Động từ đứng đầu: "Giao bài", "Công bố điểm" — không "OK/Submit" chung chung. Hover thử trực tiếp.

focus ring 2px primary hiện rõ mọi nơi (Tab để thử)

5 · Input · Autosave chip

Tên lớp
SĐT phụ huynh · chưa hợp lệ
Số điện thoại cần 10 chữ số — kiểm tra lại giúp bạn nhé.
Mã lớp (tự sinh)
Nhận xét cho học viên✓ Đã lưu nháp 21:14
Autosave-aware: reload hay rớt mạng không mất chữ nào — chip trạng thái luôn hiện.

6 · Mastery pill — 7 trạng thái

○ Chưa bắt đầu ↗ Đang học ↗ Đang tiến bộ ⚠ Cần chú ý ⚠ Rủi ro ✓ Mastered ✓ Mastered · cần ôn lại

7 · Data-state badge — 5 trạng thái (§A5.6)

Bắt buộc trên mọi insight/dự báo/mastery. Insight không có data-state là bug.

○ Chưa đủ bằng chứngkhông vẽ kết luận — "cần thêm ~2 bài để nhận định"; spectrum band dạng chấm mờ
◐ Tín hiệu ban đầugiọng giả thuyết "có dấu hiệu…" — KHÔNG đưa vào digest/báo cáo PH
(không badge)Bằng chứng ổn định — hiển thị bình thường, drill-down đầy đủ
◷ Từ 4 tuần trướcgiá trị làm mờ + gợi ý bài luyện để làm mới evidence
⚠ GV↔AI lệchchặn đưa vào báo cáo PH tới khi GV xác nhận; link tới các bản chấm lệch

8 · AI Suggestion Card

✦ AI ĐỀ XUẤT · CHỜ BẠN DUYỆTnguồn: rubric IELTS WT2 + 6 bài gần nhất

Bài viết trả lời đúng trọng tâm đề và có quan điểm rõ. Đoạn thân bài 2 lập luận còn mỏng — nên thêm một ví dụ cụ thể. Lỗi hòa hợp chủ ngữ – động từ lặp lại 3 lần.

AI đang bận — fallback không chặn việc

Bạn có thể chấm thủ công ngay, hoặc chờ hàng đợi xử lý. Bài chấm tay vẫn ghi evidence bình thường.

9 · Quota meter

AI trong tháng320/500 lượt
Làm mới ngày 01/08 · với nhịp này còn đủ dùng
AI trong tháng412/500 lượt
⚠ 82% — với nhịp này sẽ hết trước ngày 24/07
AI trong tháng478/500 lượt
Sắp hết — bài chấm AI sẽ xếp hàng chờ chu kỳ mới. Chấm tay không bị khóa.

10 · Toast Undo · Empty state · Skeleton

Đã hủy buổi học 13/07. Đã gợi ý 3 slot học bù.
Chưa có bài tập nào
Giao bài đầu tiên từ template — chưa tới 60 giây.
Skeleton đúng hình dạng nội dung — không spinner toàn trang

11 · Table dense (GV) · row 36px

HỌC VIÊNBÀI TẬPTRẠNG THÁIĐIỂMHẠN
Nguyễn Thảo MyWriting Task 2 — Công nghệ✓ Đã chấm6.011/07
Trần Đức MinhWriting Task 2 — Công nghệ⚠ Quá hạn—09/07
Phạm Thu TrangQuiz Vocabulary Unit 4↗ Đang làm—12/07

12 · Spectrum bar · Evidence link

Mỗi band = 1 kỹ năng của pack · màu theo trạng thái mastery · chấm mờ = chưa đủ bằng chứngNhìn 3 giây biết mạnh/yếu
Band 5.5 · +0.5 so với tháng trước Xem 6 bài làm gốc → P6: không có con số nào không truy được về bài thật
Icon: Lucide stroke 1.75px cỡ 20 (16 trong table dense) · Density: comfy 48px (HS/PH) · dense 36px (GV) · touch ≥48px (điểm danh) · Motion: micro 120ms · panel 200ms · page 320ms, tôn trọng prefers-reduced-motion · Radius: 6/10/16/pill · Shadow e1/e2/e3.